<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标事件失效</title>
  <style>
    .dv {
      width: 100px;
      height: 100px;
      background-color: pink;
      pointer-events: none;
    }

    .dv1 {
      width: 80%;
      height: 80%;
      background-color: purple;
    }
  </style>
</head>
<!-- 
  pointer-events: none;
  意思就是让鼠标事件失效（链接、点击等事件）。
-->

<body>
  <div class="dv">
    <div class="dv1">

    </div>
  </div>
</body>
<script>
  "use strict";
  document.querySelector(".dv").addEventListener("click", () => {
    console.log(`出现了吧`);
  });
  document.querySelector(".dv1").addEventListener("click", () => {
    console.log(`dv1`);
  });
</script>

</html>